<template>
  <el-row id="home" class="row-bg">
    <el-col :span="24" class="header">
      <el-col :span="5" class="logo" :style="collapsed?'width:60px;':'width:200px;'">
        <div class="logo-img">header</div>
        <div class="logo-title" :class="collapsed?'logo-title-close':'logo-title-display'">title</div>
      </el-col>
      <el-col :span="6">
        <div class="tools" @click.prevent="collapse">
          <i class="el-icon-menu"></i>
        </div>
      </el-col>
      <el-button type="danger" @click="myclick_test" style="z-index:999">测试按钮</el-button>
    </el-col>
    <el-col :span="24" class="main">
      <aside :class="collapsed?'menu-collapsed':' menu-expanded'">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo my-menu"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          background-color="#545c64"
          unique-opened
          router
        >
          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
            <el-submenu index="1-4">
              <span slot="title">选项4</span>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>-->
          <template v-for="(item,index) in $router.options.routes">
            <el-submenu :index="index+''" v-if="!item.leaf" :key="index">
              <template slot="title">
                <i :class="item.iconCls"></i>
                <span slot="title">{{item.name}}</span>
              </template>
              <el-menu-item
                v-for="child in item.children"
                :index="child.path"
                :key="child.path"
              >{{child.name}}</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </aside>
      <section class="main-content">
        <div class="content-header">content-header</div>
        <div class="content-body">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </section>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data () {
    return {
      collapsed: false,
      isCollapse: false
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    collapse () {
      this.collapsed = !this.collapsed
      this.isCollapse = !this.isCollapse
    },
    myclick_test () {
      console.log('click ok !!!')
    }
  }
}
</script>

<style lang="less">
#home {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  .header {
    height: 60px;
    background-color: rgb(0, 153, 255);
    line-height: 60px;
    .logo {
      // width: 200px;
      height: 60px;
      min-width: 64px;
      line-height: 60px;
      font-size: 22px;
      border-color: hsla(62, 77%, 76%, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      display: flex;
      text-align: center;
      font-weight: bold;
      .logo-img {
        flex: 0 0 64px;
        width: 60px;
        border: none;
        font-size: 14px;
      }
      .logo-title {
        flex: 1;
        flex: 0 0 140px;
      }
      .logo-title-close {
        display: none;
      }
    }
    .tools {
      padding: 0 23px;
      width: 22px;
      height: 60px;
      font-size: 22px;
      color: #fff;
      line-height: 60px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    position: absolute;
    top: 60px;
    bottom: 0;
    overflow: hidden;

    aside {
      flex: 0 0 200px;
      overflow-x: hidden;
      min-height: 100vh;
      height: 100%;
      background-color: #545c64;
      color: #fff;

      .el-submenu__title,
      .el-menu-item,
      i {
        color: #fff;
      }

      .is-active {
        color: #ffd04b;
      }
      ul {
        border: none;
        height: 100%;
      }
      .my-menu:not(.el-menu--collapse) {
        width: 200px;
        border: none;
        background-color: #545c64;
        .el-menu {
          background-color: #1a1b1d;
        }
      }
    }
    aside.menu-collapsed {
      flex: 0 0 60px;
      width: 64px;
    }
    aside.menu-expanded {
      flex: 0 0 200px;
    }
    section {
      background: #e6e6e6;
      flex: 1;
      padding: 10px;
      padding-bottom: 1px;
      overflow-y: scroll;
    }
  }
}
</style>
